<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>按键修饰符</title>
    <!-- 引入vue.js文件 -->
    <script src="./js/vue.js"></script>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <!-- 创建vue模板 -->
    <div class="box">
        <!-- 使用：按键修饰符可以是keycode码 也可以是别名 -->
        <!-- <input type="text" v-on:keyup.enter="yangyang"> -->
        <input type="text" @keyup.13="yangyang">
        <div @keyup.space="yangyang1"></div>
    </div>
    <script>
        // 创建vue实例对象
        let vm = new Vue({
            el:'.box',
            methods:{
                yangyang(){
                    console.log('专利费！');
                },
                yangyang1(){
                    console.log('test');
                }
            }
        })
        /*
            常用的按键修饰符：
            .enter
            .tab
            .space
            .up
            .down
            .left
            .right
            .ctrl
            .alt
            .delete

            在单独的div中无法设置按键修饰符
        */
    </script>
</body>
</html>